<template>
  <div class="views_BOX">
    <div class="BOX_nav">
      <div class="BOX_nav_lf">
        <el-form :model="queryList" :inline="true">
          <el-form-item label>
            <el-input maxlength="50" v-model="queryList.search" placeholder="按姓名，手机号搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button @click="resetClick">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="BOX_nav_lr"></div>
    </div>
    <div class="BOX_main">
      <vue-scroll ref="vs" :ops="$store.state.ops">
        <el-table ref="multipleTable" :data="list" tooltip-effect="dark">
          <el-table-column label="序号" width="80" show-overflow-tooltip>
            <template slot-scope="scope" align="center">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column label="姓名" show-overflow-tooltip align="center">
            <template slot-scope="scope">{{scope.row.userName}}</template>
          </el-table-column>
          <el-table-column label="手机号" show-overflow-tooltip align="center">
            <template slot-scope="scope">{{scope.row.account}}</template>
          </el-table-column>
          <el-table-column label="操作" width="290" align="center">
            <template slot-scope="scope"></template>
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <div class="BOX_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="queryList.pageNo"
        :page-size="queryList.size"
        layout="total, prev, pager, next"
        :total="queryList.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      queryList: {
        pageNo: 1,
        pageSize: 10,
        total: null,
        search: ""
      },
      list: []
    };
  },
  created: function() {},
  mounted() {
    // this.listFun();
  },
  computed: {},
  methods: {
    resetClick() {
      this.queryList = {
        pageNo: 1,
        pageSize: 10,
        total: null,
        search: ""
      };
      this.list = [];
      this.queryListFun();
    },
    searchClick() {
      this.list = [];
      this.queryList.pageNo = 1;
      this.queryListFun();
    },
    // 分页
    handleCurrentChange(val) {
      this.queryList.pageNo = val;
      this.queryListFun();
    },
    async listFun() {
      await this.queryListFun();
    },
    async queryListFun() {
      let self = this;
      let params = {
        ...self.queryList
      };
      let res = await MembershipPageList(params);
      if (res.statusCode == "200") {
        let data = res.data;
        self.queryList.total = Number(data.total);
        self.list = data.records;
      } else {
        this.$message({
          type: "error",
          message: res.statusMessage
        });
      }
    }
  },
  filters: {},
  watch: {}
};
</script>
<style scoped>
.BOX_main {
  height: calc(100% - 120px);
  margin-top: 15px;
  overflow: hidden;
}

.BOX_page {
  width: 100%;
  height: 40px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
.BOX_nav {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
